<template>
    <view>
        <view class="login-title">
            <view>{{ $t('loginPage.welcomeToLogin') }}</view>
        </view>
        <view class="register">
            <text>{{ $t('loginPage.noAccountNumber') }}？</text>
            <text :class="[$i18n.locale]" @click="go_register">{{ $t('loginPage.immediateRegistration') }}</text>
        </view>
        <view class="from">
            <view class="from-item">
                <view class="label font-28">{{ $t('loginPage.loginAccount') }}</view>
                <input class="font-28" maxlength="40" v-model="from.mobile" type="text" :placeholder="psw_login ? $t('loginPage.accountPlaceholderPassword') : $t('loginPage.accountPlaceholder')" placeholder-class="placeholder" @blur="getStatus" />
                <image class="item-img" src="../static/close_new.png" @tap="clearMobile"></image>
            </view>
            <view>
                <view class="from-item" v-if="psw_login">
                    <view class="label font-28">{{ $t('loginPage.loginPassword') }}</view>
                    <input class="font-28 no-bor" v-model="from.password" :type="isPsw ? 'text' : 'password'" placeholder="請輸入密碼" placeholder-class="placeholder" />
                    <image class="item-img" :src="isPsw ? pswYes : pswNo" @tap="isPsw = !isPsw"></image>
                </view>
                <view v-else>
                    <picker :range="list" range-key="area_name" @change="picker_change">
                        <view class="from-item">
                            <view class="font-30 label">{{ $t('loginPage.placeOfAttribution') }}</view>
                            <view class="font-30" :style="{
                                    textAlign: 'left',
                                    flex: 1,
                                    color: area_name ? '#333333' : 'grey'
                                }">
                                {{ area_name ? area_name : $t('loginPage.pleaseSelect') + $t('loginPage.placeOfAttribution') }}
                            </view>
                        </view>
                    </picker>
                    <view class="from-item rel">
                        <view class="label font-28">{{ $t('loginPage.verificationCode') }}</view>
                        <input class="font-28" v-model="from.mobile_code" type="number" maxlength="4" :placeholder="$t('loginPage.verificationCode')" placeholder-class="placeholder" />
                        <vercode class="right" v-model="from.mobile" :timeout="timeout" :area="area"></vercode>
                    </view>
                    <view class="from-item" v-if="isNewUser">
                        <view class="label font-28">{{ $t('loginPage.invitationCode') }}</view>
                        <input class="font-28 no-bor" v-model="from.invite" :placeholder="$t('loginPage.pleaseEnter') + $t('loginPage.invitationCode')" placeholder-class="placeholder" />
                    </view>
                </view>
            </view>
            <view class="psw-login">
                <text @click="psw_login = !psw_login">{{ psw_login ? $t('loginPage.verificationCodeLogin') : $t('loginPage.passwordLogin') }}</text>
                <text class="forget-psw" @tap="go_forget">{{ $t('loginPage.forgetPassword') }}</text>
            </view>
        </view>
        <view class="buttom font-32" :class="[$i18n.locale]" @tap="save">{{ $t('loginPage.login') }}</view>
        <!-- <login-modal ref="loginMoal" @confirm="loginConfirm"></login-modal> -->
        <!-- <view class="wx-login">
			<view class="wx-title">
				<view class="line"></view>
				<text>使用第三方登录</text>
				<view class="line"></view>
			</view>
			<view class="logo-box" @click="wx_login">
				<image src="../static/wx_logo.png"></image>
				<text>微信</text>
			</view>
		</view> -->
    </view>
</template>

<script>
    import vercode from '@/components/get_verification.vue'
    export default {
        data() {
            return {
                from: {
                    mobile: '',
                    password: '',
                    mobile_code: '',
                    invite: ''
                },
                area: '',
                area_name: '',
                list: [],
                timeout: 0,
                psw_login: true,
                isPsw: false,
                pswNo: '../static/psw_no.png',
                pswYes: '../static/psw_yes.png',
                isNewUser: false
            }
        },
        computed: {
            isEmail() {
                const $email = /^([a-zA-Z\d])((\w|-)+\.?)+@([a-zA-Z\d]+\.)+[a-zA-Z]{2,6}$/
                return $email.test(this.from.mobile)
            }
        },
        mounted() {
            this.$http('get|api/Api/send_validate_code').then(res => {
                this.list = res.result.country_area
                this.timeout = +res.result.sms_time_out
            })
        },
        methods: {
            getStatus() {
                if (this.psw_login || !this.from.mobile) {
                    return
                }
                this.$http('post|api/Api/issetMobile', {
                        mobile: this.from.mobile
                    })
                    .then(res => {
                        if (res.status == 1) {
                            this.isNewUser = true
                        }
                    })
                    .catch(() => {
                        this.isNewUser = false
                    })
            },
            clearMobile() {
                this.from.mobile = ''
            },
            async checkFirstLogin() {
                uni.showLoading({
                    mask: true
                })
                const res = await this.$http('post|api/user/checkFirstLogin', {
                    mobile: this.from.mobile
                }).finally(() => {
                    uni.hideLoading()
                })
                return res
            },
            do_login(data = {}) {
                uni.showLoading({
                    mask: true
                })
                this.$http('post|api/User/do_login', {
                        // #ifdef APP-PLUS
                        push_id: plus.push.getClientInfo().clientid,
                        // #endif
                        ...data
                        // mobile: this.from.mobile,
                        // password: this.from.password,
                        // mobile_code: this.from.mobile_code,
                        // invite: this.from.invite
                    })
                    .finally(() => {
                        uni.hideLoading()
                    })
                    .then(res => {
                        this.$toastApp(res.msg)
                        this.$store.commit('login', res.result)
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)
                    })
                    .catch(err => {
                        this.$toastApp(err.msg)
                    })
            },
            code_login(data = {}) {
                uni.showLoading({
                    mask: true
                })
                this.$http('post|api/User/code_login', {
                        // #ifdef APP-PLUS
                        push_id: plus.push.getClientInfo().clientid,
                        // #endif
                        ...data
                        // mobile: this.from.mobile,
                        // password: this.from.password,
                        // mobile_code: this.from.mobile_code,
                        // invite: this.from.invite
                    })
                    .finally(() => {
                        uni.hideLoading()
                    })
                    .then(res => {
                        this.$toastApp(res.msg)
                        this.$store.commit('login', res.result)
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)
                    })
                    .catch(err => {
                        this.$toastApp(err.msg)
                    })
            },
            passwordSubmit() {
                if (!this.from.mobile) {
                    const tips = this.$t('loginPage.pleaseEnter') + this.$t('loginPage.loginAccount')
                    this.$toastApp(tips)
                    return
                }
                if (!this.from.password) {
                    const tips = this.$t('loginPage.pleaseEnter') + this.$t('loginPage.loginPassword')
                    this.$toastApp(tips)
                    return
                }
                const data = {
                    mobile: this.from.mobile,
                    password: this.from.password
                }
                this.do_login(data)
            },
            codeSubmit() {
                if (!this.from.mobile) {
                    const tips = this.$t('loginPage.pleaseEnter') + this.$t('loginPage.loginAccount')
                    this.$toastApp(tips)
                    return
                }
                if (!this.from.mobile_code) {
                    const tips = this.$t('loginPage.pleaseEnter') + this.$t('loginPage.verificationCode')
                    this.$toastApp(tips)
                    return
                }
                const data = {
                    mobile: this.from.mobile,
                    mobile_code: this.from.mobile_code,
                    invite: this.from.invite
                }
                this.code_login(data)
            },
            save() {
                if (this.psw_login) {
                    this.passwordSubmit()
                } else {
                    this.codeSubmit()
                }
            },
            loginConfirm() {
                this.save()
            },
            go_register() {
                uni.redirectTo({
                    url: '/pages/register'
                })
            },
            go_forget() {
                uni.navigateTo({
                    url: '/pages/forgetPSW?type=2'
                })
            },
            picker_change(e) {
                let index = e.detail.value
                this.area = this.list[index].area
                this.area_name = this.list[index].area_name
            },
            wx_login() {
                uni.showLoading({
                    title: '登錄中'
                })
                uni.login({
                    provider: 'weixin',
                    success: loginRes => {
                        // this.$toastApp(loginRes);
                        // console.log(loginRes)
                        // 获取用户信息
                        uni.getUserInfo({
                            provider: 'weixin',
                            success: infoRes => {
                                console.log('用户昵称为：' + infoRes.userInfo.nickName)
                                console.log('头像：' + infoRes.userInfo.avatarUrl)
                                console.log('unionid：' + loginRes.authResult.unionid)
                                console.log('openId：' + infoRes.userInfo.openId)

                                this.$http('post|api/User/bind_guide', {
                                        nickname: infoRes.userInfo.nickName,
                                        head_pic: infoRes.userInfo.avatarUrl,
                                        unionid: loginRes.authResult.unionid,
                                        openid: infoRes.userInfo.openId
                                    })
                                    .then(res => {
                                        this.$toastApp(res.msg)
                                        setTimeout(() => {
                                            uni.navigateBack()
                                        }, 500)
                                    })
                                    .catch(err => {
                                        this.$toastApp(err.msg)
                                        if (err.status == -1) {
                                            setTimeout(() => {
                                                uni.redirectTo({
                                                    url: '/pages/bind_account'
                                                })
                                            }, 500)
                                        }
                                    })
                            }
                        })
                    }
                })
            }
        },
        components: {
            vercode
        }
    }
</script>

<style lang="scss">
    .login-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 66rpx;
        font-size: 48rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #313133;
        line-height: 66rpx;
        // padding: 0 20rpx;
        margin-left: 60rpx;

        .language-box {
            // position: absolute;
            // top: 24rpx;
            // right: 20rpx;
            display: flex;
            align-items: center;
            margin-right: 20rpx;

            .language-item {
                margin-left: 20rpx;
            }

            .checks {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24rpx;
                color: #333333;

                image {
                    width: 32rpx;
                    height: 32rpx;
                }

                text {
                    margin-left: 10rpx;
                }
            }

            .check-box {
                position: absolute;
                z-index: 9999;
                width: 120rpx;
                margin-top: 6rpx;
                background-color: #ffffff;
                border: 2rpx solid #cccccc;

                .check-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 60rpx;
                    color: #333333;
                    font-size: 24rpx;

                    image {
                        width: 24rpx;
                        height: 24rpx;
                        border-radius: 50%;
                        margin-right: 4rpx;
                    }
                }
            }
        }
    }

    .register {
        height: 36rpx;
        font-size: 26rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #919298;
        line-height: 36rpx;
        margin-left: 60rpx;
        margin-top: 14rpx;

        .zh {
            color: var(--theme);
        }

        .hk {
            color: var(--themeHK);
        }
    }

    .psw-login {
        position: relative;
        height: 36rpx;
        font-size: 26rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #919298;
        line-height: 36rpx;
        margin-top: 24rpx;

        .forget-psw {
            position: absolute;
            right: 0;
            padding: 10rpx;
        }
    }

    .from {
        padding: 60rpx;
        padding-bottom: 0;
        box-sizing: border-box;

        .rel {
            position: relative;
        }

        .right {
            position: absolute;
            right: 0;
        }

        .from-item {
            display: flex;
            border-bottom: 1rpx solid #f2f3f6;
            height: 100rpx;
            width: 630rpx;
            align-items: center;
            position: relative;

            .label {
                width: 140rpx;
            }

            .placeholder {
                color: #d7d7d9;
            }

            input {
                width: 60%;
            }

            .no-bor {
                border: none;
                outline: none;
            }

            .item-img {
                position: absolute;
                top: 50%;
                right: 20rpx;
                transform: translateY(-50%);
                width: 36rpx;
                height: 36rpx;
            }

            .isChoose {
                width: 80%;
                height: 100%;
                line-height: 100rpx;
            }
        }
    }

    .buttom {
        width: 630rpx;
        height: 100rpx;

        border-radius: 50rpx;
        text-align: center;
        line-height: 100rpx;
        margin: 0 auto;
        margin-top: 60rpx;
        color: #ffffff;

        &.zh {
            background: var(--theme);
        }

        &.hk {
            background: var(--themeHK);
        }
    }

    .wx-login {
        position: absolute;
        bottom: 60rpx;
        left: 0;
        right: 0;

        .line {
            display: inline-block;
            width: 122rpx;
            height: 4rpx;
            vertical-align: middle;
            background-color: #d7d7d7;
        }

        .wx-title {
            // display: inline-block;
            font-size: 28rpx;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            // text-align: left;
            color: #b9b9b9;
            line-height: 40rpx;
            letter-spacing: 1rpx;
            text-align: center;

            text {
                padding: 0 20rpx;
            }
        }

        .logo-box {
            margin-top: 70rpx;
            text-align: center;

            image {
                width: 68rpx;
                height: 68rpx;
            }

            text {
                display: block;
                font-size: 26rpx;
                font-family: PingFangSC, PingFangSC-Medium;
                font-weight: 500;
                text-align: center;
                color: #999999;
                line-height: 36rpx;
                letter-spacing: -1px;
            }
        }
    }
</style>
